<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Login</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../css/layui.css" type="text/css">
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <link href="../css/drag.css" rel="stylesheet" type="text/css">
    <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../js/drag.js" type="text/javascript"></script>
</head>
<body>
<div class="login_box">
    <h2>酒店宠物后台管理系统</h2>

    <h3 > 登  录 </h3>
    <span th:text="${Error}" style="color: red"></span>
    <div>
        <form action="/account/login" method="post" >
            <div style="margin: 0 auto">
            <div>
                <p>用户名称</p>
                <input class="" type="text" name="adminname" th:value="admin"/>
            </div>
            <div>
                <p>密 码</p>
                <input class="" type="password" name="password" th:value="admin"/>
            </div>
            </div>
            <p>验 证 </p>
                <div id="drag"></div>
            <div style="margin: 0 auto">
            <p>
                <input class="layui-btn" type="submit" value="登录" onclick="return verify();"/>
                新用户？<a href="/">注册</a>
            </p>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $('#drag').drag();
    function verify() {
        var a=document.getElementById("verification").innerHTML;
        alert(a);
        if(a === '拖动滑块验证'){
            alert('请验证');
            return false;
        }
        else{
            return true;
        }
    }
</script>
</body>
</html>
